<template>
  <Popup
    closeable
    round
    :show="visible"
    position="bottom"
    :safe-area-inset-top="safeAreaInsetTop"
    :safe-area-inset-bottom="safeAreaInsetBottom"
    @close="$emit('close')"
  >
    <div class="m-popup-base-head" v-if="showHead">
      <slot name="head">{{ title }}</slot>
    </div>
    <div class="m-popup-base-body">
      <slot></slot>
    </div>
  </Popup>
</template>

<script setup name="MPopupBase">
import { Popup } from 'vant'

const props = defineProps({
  title: String,
  visible: {
    type: Boolean,
    default: false,
  },
  showHead: {
    type: Boolean,
    default: true,
  },
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: true,
  },
})
</script>

<style lang="stylus" scoped>
.m-popup-base-head
  padding-left 16px
  height h=50px
  line-height h
  font-size 18px
  background #F1F1F1
  color #2D2926
.m-popup-base-body
  padding 20px 18px
  min-height 100px
  font-size 16px
  color #91969A
  line-height 28px
</style>
